import React, { useEffect, useState } from 'react'
import axios from '../../api/api'
import { Space, Table, Tag } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
import Serach from '../../compument/Serach';
import {  Modal } from 'antd';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
    FormOutlined ,
    SignatureFilled
  } from '@ant-design/icons';
function Index() {
    const [data,setData]=useState()
    const [keyword,setkeyowrd]=useState('')
    const getDatalist=async()=>{
    const res=await axios.get('/api/article/list',{
        params:{
            keyword:keyword
        }
    })

    setData(res.data.rows)
    }
    useEffect(()=>{
        getDatalist()
    },[keyword])
    // 搜索
    const [form]=Form.useForm()
    const onFinish = values => {

        setkeyowrd(values.keyword)
      };
      const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
      };
    //   重置
    // 30.点击重置清空搜索数据，点击查询与列表联动展示结果。
    const cz=()=>{
   form.resetFields()
    }
  
    const [title,setTitle]=useState()
    const [userform]=Form.useForm()
    const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
    
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const Finish =async(values)=> {
    console.log('Success:', values);
    const command={
"title":values.title,//文章标题
"content":values.content,//文章内容
"tagList":values.tagList,//标签  array[string]
"categoryList":values.tagList,//分类  array[string]
"authorId":47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息
    } 
    const res=await axios.post('/api/article',command,{
        headers :{
            Authorization:'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Imp5a2wiLCJ1c2VySWQiOjQ3NTI5NTU1LCJyb2xlIjoxLCJpYXQiOjE3Mzk3OTQyNDIsImV4cCI6MTc0MjM4NjI0Mn0.O7KlsogMjr6YowtOXKGrEaldz5kjKHWQCn3FGvRd1bA',
          }
          
    })
    getDatalist()
    alert('新增成功')
    setIsModalOpen(false);
  };
  const FinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };
  const addxx=()=>{
    setIsModalOpen(true);
    setTitle('添加一条记录')
  }
    // 24.点击添加消息图标弹出弹框。

    const tb=()=>{
setIsModalOpen(true);
setTitle('添加一条记录')
    }
    // 38.点击右下角图标弹出弹框。
    const yxj=()=>{
        setIsModalOpen(true);
        setTitle('添加一条记录')
            }
    const columns = [
        {
          title: '消息id',
          dataIndex: 'id',
          key: 'id',
          render: text => <a>{text}</a>,
        },
        {
          title: '消息名称',
          dataIndex: 'content',
          key: 'content',
        },
        {
          title: '消息描述词',
          dataIndex: 'title',
          key: 'title',
        },
        {
            title: '创建人',
            dataIndex: 'title',
            key: 'title',
        },
          {
            title: '创建时间',
            dataIndex: 'updatedAt',
            key: 'updatedA',
          },
       
        {
          title: 'Action',
          key: 'action',
          render: (_, record) => (
            <Space size="middle">
              <a>Invite {record.name}</a>
              <a>Delete</a>
            </Space>
          ),
        },
      ];
  return (
    <div>
       <div style={{width:'1200px'}}><Serach onFinish={onFinish} onFinishFailed={onFinishFailed} cz={cz} form={form}></Serach></div>
       

       <div style={{width:'30px',height:'30px',background:'blue',float:'right',marginTop:'15px'}} onClick={tb}>
       <FormOutlined style={{width:'30px',height:'30px',marginLeft:'8px'}}/>
       </div>
       <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
  <Form
  form={userform}
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={Finish}
    onFinishFailed={FinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="消息名称"
      name={['content']}
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="消息记录"
      name={['title']}
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        确定
      </Button>
    </Form.Item>
   
  </Form>
      </Modal>
      <Button onClick={addxx}>添加消息</Button>
<Table columns={columns} dataSource={data} 
pagination={{
    total:data,
    showSizeChanger:true,
    showQuickJumper:true,
    showTotal:total => `Total ${total} items`,
    defaultPageSize:10
}}

/>

<div style={{width:'50px',height:'50px',background:'yellow',float:'right',marginTop:'15px',borderRadius:'30px'}} onClick={yxj}>
       
       <SignatureFilled style={{width:'30px',height:'30px',marginLeft:'10px',fontSize:'30px',marginTop:'10px'}}/>
       </div>
    </div>
  )
}

export default Index
